<template>
  <div class="header">
      <div class="header-left">
        <span class="iconfont">
          &#xe624;
        </span>
      </div>
      <div class="header-middle">
        <span class="iconfont search-icon">&#xe632;</span>
        <div class="kw">
          输入城市/景点/游玩主题
        </div>
        <input class="header-input" type="text" />
      </div>
      
        <div class="header-right">
          <router-link to="/city">
            <!-- {{this.$store.state.city }} -->
            {{ this.namedCity }}
            <span class="iconfont arrow-icon">&#xe6aa;</span>
          </router-link>
        </div>
      
      
  </div>
</template>

<script>
// 把state里面的映射, 这样子就不用写 => {{this.$store.state.city }}那么长一串了
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'HomeHeader',
  props: {
    // city: [String,]
  },
  computed: {
    // 对象的写法, 这种写法,键名和键值可以不一样
    // ...mapState({
    //   // city1其实是这个子组件里的属性, 'city'是state里面的
    //   city1: "city"  // 把这个组件里面的city映射到store里面的city去
    //   // 如果把键值"city"改成"city2", 那么store里面的state.js里面的键值city要改成city2
    // })
    // 数组的写法, 这种写法就是键名和键值这里的属性和state里面的属性要一样
    // 感觉还是数组的写法好, 映射关系更强
    ...mapState(['city']),
    ...mapGetters({
      namedCity: 'namedCity'
    })

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->


<style lang="stylus" scoped>
@import '~@styles/variables.styl';

/* 修改a的样式其实就是修改 router-link的样式 */
div {
  display flex
}

.header {
  // display: flex;
  width: 100%;
  height: $headerHt;
  // justify-content: center;
  // align-items: center;
  color: #eee
  background-color: $bgColor;
}

.header .header-left {
  width .8rem
  height 100%
  justify-content center
  align-items center
  // line-height $headerHt;
  // background-color green
}

.header .header-right {
  // width 1.32rem
  // height 100%;
  // 写样式的时候, router-link要改成a, router-link不会生效的
  router-link,
  a {
    display: flex;
    justify-content center
    align-items center
    // width: 100%;
    // height: 100%;
    padding:0 .1rem;
    font-size .3rem
    color: #fff;
  }
  // line-height $headerHt;
  // background-color yellow
}

.header .header-right .arrow-icon {
  font-size .35rem
}

.header .header-middle {
  
  position relative
  flex 1; //这个弹性包括了高度, 所以我们不用设置height
  margin .14rem 0;

  // background-color orange
}

.header .header-middle .search-icon {
  position absolute
  top .12rem
  left .1rem
  // color red
  color $darkTxtColor
  font-size .35rem
}

.header .header-middle .kw {
  position absolute
  top 0
  left .5rem
  // width 100%
  height 100%
  justify-content left
  align-items center
  // text-indent .3rem
  color #e4e7ea
  color $darkTxtColor
  font-size .32rem
}

.header .header-middle .header-input {
  width 100%
  height 100%
  
  border-radius .06rem
}



</style>
